<template>
  <div
    :style="{ width: props.width, height: props.height }"
    class="flex justify-center items-center"
  >
    <Icons
      :icon="props.iconName"
      :size="states.iconSize"
      :color="states.iconColor"
    />
  </div>
</template>

<script setup lang="ts">
import Icons from "@renderer/components/icons/index.vue";
import { computed, watch } from "vue";
let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
  iconName: {
    type: String,
    default: "",
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
let emit = defineEmits(["updateSize"]);
watch(
  () => props.models.iconSize,
  () => {
    emit("updateSize", {
      w: props.models.iconSize + 50,
      h: props.models.iconSize + 30,
      id: props.id,
    });
  }
);
</script>

<style scoped lang="scss"></style>
